<template>
  <el-autocomplete
    v-model="inputValue"
    placeholder="请输入问题标题"
    autofocus
    :maxlength="100"
    show-word-limit
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    value-key="title"
    @select="handleSelect"
  >
    <template slot-scope="{ item }">
      <span class="info f-mini m-r-16">已有问题</span>
      {{ item.title }}
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  name: 'title-search', // 发布问题的标题预搜索
  props: {
    title: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      inputValue: '',
      options: [],
      loading: false,
    };
  },
  methods: {
    querySearch(query, callback) {
      if (query !== '') {
        this.loading = true;
        this.$api.search.fn({
          type: 'Issue',
          spaceId: this.$route.params.spaceId,
          title: query,
        }).then(res => callback(res.data))
          .catch(() => {})
          .then(() => { this.loading = false; });
      }
    },
    handleSelect(issue) {
      const url = this.$router.resolve(`/spaces/${issue.product_id}/issues/${issue.id}`).href;
      window.open(url, '_blank');
    },
  },
  watch: {
    inputValue(val) { this.$emit('update:title', val); },
  },
};
</script>

<style></style>
